<template>
  <el-row :gutter="20" id="designProductConsStyle">
    <el-form :model="requestParams" label-width="150px" ref="form" :rules="rules" :disabled="todos==3?true:false">
<el-col :span="24">
<el-form-item label="项目名称:" size="medium" :prop="todos==3?'':'jt_project_id'">
   <el-select v-model="requestParams.jt_project_id" filterable placeholder="请选择" size="medium" class="select-style">
    <el-option
      v-for="item in proNameArr"
     :key="item.jt_project_id"
      :label="item.project_name"
      :value="item.jt_project_id">
    </el-option>
  </el-select>
  
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="构件类型:" size="medium" :prop="todos==3?'':'cop_type'">
  <el-checkbox-group 
  @change="onChange"
  v-if="todos==3?false:true"
    v-model="requestParams.cop_type">
    <el-checkbox v-for="item in compTypeArr" :label="item.name" :key="item.value">{{item.name}}</el-checkbox>
  </el-checkbox-group>
<p  v-if="todos==3?true:false">
<span   class="com-type-style"  v-for="item in copTypeArr" :label="item" :key="item">{{item}}</span>
</p>  
<!-- <el-checkbox-group 
  @change="onChange"
  v-if="todos==3?true:false"
    v-model="requestParams.cop_type">
    <el-checkbox v-for="item in copTypeArr" :label="item" :key="item">{{item}}</el-checkbox>
  </el-checkbox-group>-->
</el-form-item> 
</el-col>
<el-col :span="24">
<el-form-item label="构件总数(个):" size="medium" :prop="todos==3?'':'cop_num'" >
  <el-input-number v-model="requestParams.cop_num" controls-position="right"  size="medium" placeholder="请输入构件总数(个)" @change="handleChange" :precision="0" :step="1" :min="0" :max="10000"  ></el-input-number>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="构件总方量(m³):" size="medium" :prop="todos==3?'':'cop_vol'" >
  <el-input-number v-model="requestParams.cop_vol" controls-position="right"  size="medium" placeholder="请输入构件总方量(m³)" @change="handleChange" :precision="2" :step="0.1" :min="0" :max="1000000"  ></el-input-number>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="完成安装时间:" size="medium" :prop="todos==3?'':'finish_time'">
  <el-date-picker
      v-model="requestParams.finish_time"
      type="date"
      size="medium"
      class="date-style"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24" class="bottom-box" v-show="todos==3?false:true">
<el-button size="medium" @click="onCancel">取消</el-button> <el-button type="primary" size="medium" @click="onSure('form')">确定</el-button>
</el-col>
    </el-form>
  </el-row>
</template>

<script>
import {standardCodeApi} from '@/services/StandardCode'
import {ConstrucManagementApi,ProductManageApi} from '@/services/WorkCenter'
export default {
  props:{
todos:Number,
catchBack:Function,
catchSave:Function,
detailObj:Object
  },
data(){
  return{
    copTypeArr:[],//详情时无选中的不展示；
proNameArr:[],//项目名称
compTypeArr:[],//构件类型
requestParams:{
cop_vol:undefined,
jt_project_id:'',
cop_type:[],
cop_num:undefined,
finish_time:'',
business_type:3
},
rules:{
 jt_project_id:[
    {required:true,message:'项目名称不能为空',trigger:'change'}
  ],
  cop_type:[
    {required:true,message:'装配式结构类型不能为空',trigger:'change'}
  ],
  cop_num:[
    {required:true,message:'构件总数(个)不能为空',trigger:'change'}
  ],
  cop_vol:[
    {required:true,message:'构件总方量（m³）不能为空',trigger:'change'}
  ],
 finish_time:[
    {required:true,message:'完成安装时间不能为空',trigger:'change'}
  ]
}
  }
},
methods:{
   //获取施工项目下拉
  getConsProjectList(){
  return  ConstrucManagementApi.getConsProjectList({
     params:{
       type:3,//1设计项目，2生产项目，3施工项目，（默认3）
     }
   }).then((res)=>{
     this.proNameArr=[];
this. proNameArr=res.data.list;
   }).catch((error)=>{
     console.log(error)
   })
  },
  //复选框值改变时触发的事件
  onChange(val){
console.log('val=',val,this.compTypeArr)
  },
   // 获取标准码
    getStardandCode () {
    return  standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'jtComponetType'
        }
      }).then((res) => {
        this.compTypeArr= res.data.list
      }).catch((error) => {
        console.log(error)
      })
    },
  handleChange(value) {
        console.log(value);
      },
//取消
onCancel(){
this.$refs['form'].resetFields();
this.catchBack();
},
//确定
onSure(data){
this.$refs[data].validate((valid)=>{
  if(valid){
      this.requestParams.cop_type=this.requestParams.cop_type.join(',')
    if(this.todos==1){//新增  
      ConstrucManagementApi.addConsInfo({
        data:this.requestParams
      }).then((res)=>{
        if(res.code==0){
          this.$message.success('操作成功')
          this.catchSave()
        }
        console.log('res=',res)
      }).catch((error)=>{
        console.log(error)
      })
}else if(this.todos==2){
      this.requestParams.id=this.detailObj.cop_id;
      ConstrucManagementApi.editConsInfo({
   data:this.requestParams
}).then((res)=>{
  if(res.code==0){
    this.$message.success('操作成功')
    this.catchSave()
  }
  console.log('res=',res)
}).catch((error)=>{
  console.log(error)
})
    }
  }else{
    console.log('error')
  }
})
},
//查看详情
detailConsInfo(){
   ProductManageApi. getComponentDetail({
     params:{
       id:this.detailObj.cop_id
     }
   }).then((res)=>{
     this.copTypeArr=[];
this.requestParams=res.data;
this.requestParams.cop_type=this.requestParams.cop_type.split(',')
if(this.todos==3){
  this.copTypeArr=this.requestParams.cop_type
  console.log('操作copTypeArr=',this.copTypeArr,'值=',this.requestParams.cop_type)
}
   }).catch((error)=>{
     console.log(error)
   })
}
},
watch:{//监听
  todos(n,o){
    if(n==0){
      this.copTypeArr=[]
      this.$refs['form'].resetFields();
    }else{
      this.getConsProjectList();//施工项目下拉
      this.getStardandCode ();//标准码获取构件类型
    }
    if(n==2|n==3){
      this.detailConsInfo();//详情
    }
console.log('watch-todos=',n,'this.requestParams=',this.requestParams)
  }
},
async created(){
  await this.getConsProjectList();//施工项目下拉
  await this.getStardandCode ();//标准码获取构件类型
  if(this.todos==2|this.todos==3){
   this.detailConsInfo();//详情
  }
console.log('created-todos=',this.todos,'this.requestParams=',this.requestParams)
}
}
</script>

<style lang="scss" scoped>
.bottom-box{
  text-align:right;
  margin-top:4px;
}
.select-style{
  width:100%!important;
}
.date-style{
  width:100%;
}
.com-type-style{
  margin-right:12px;
}
</style>